<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>登陆验证</title>
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script>
			function checkuname() {
				username = $("#uname").val();
				//验证规则：
				reg = /^[a-zA-Z0-9]{3,10}$/;
				if(!reg.test(username)) {
					$("#uname").css("border-color", "red");
					return false;
				} else {
					$("#uname").css("border-color", "");
					return true;
				}
			}

			function checkupsw() {
				psw = $("#upsw").val();
				reg = /^[0-9]{6}$/;
				if(!reg.test(psw)) {
					$("#upsw").css("border-color", "red");
					return false;
				} else {
					$("#upsw").css("border-color", "");
					return true;
				}
			}

			function checkall() {
				checkuname();
				checkupsw();
			}
		</script>
	</head>

	<body>
		<h3>用户名是字母数字的组合三到十个，密码为六位数字</h3> 用户名
		<input onblur="checkuname()" type="text" id="uname" /> 密码
		<input onblur="checkupsw()" type="password" id="upsw" />
		<button onclick="checkall()">登录</button>
	</body>

</html>